<template>
  <div>
    <g-layout :isShowLeftSider="false">
      <template #content>
        <div class="content-container">
          <calendar v-model:value="value">
            <template #dateCellRender="{ current }">
              <ul class="events">
                <li v-for="item in getListData(current)" :key="item.content">
                  <a-badge :status="item.type" :text="item.content" />
                </li>
              </ul>
            </template>
            <template #monthCellRender="{ current }">
              <div v-if="getMonthData(current)" class="notes-month">
                <section>{{ getMonthData(current) }}</section>
                <span>Backlog number</span>
              </div>
            </template>
          </calendar>
        </div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    mixins: [IndexMixin],
  });
</script>

<style lang="less" scoped>
  .content-container {
    padding: 16px;
  }
</style>
